<template>
	<view class="food">
		<view class="top">
			<ppc-section :title="title" v-if="!isPackage"></ppc-section>
			<!-- 搜索栏 -->
			<uni-search-bar placeholder="请输入食物名称查找" clearButton="auto" v-model="searchValue" cancelButton="none"
				bgColor="#e9ebf0" @blur="search" />
		</view>
		<view class="center">
			<!-- tab切换 -->
			<view class="tab" style="height:10%;">
				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
					activeColor="#87C38F"></uni-segmented-control>
			</view>
			<scroll-view @scrolltolower="lowerBottom" style="height:90%;" scroll-y="true">
				<view class="content">
					<!-- 常用食物 -->
					<view v-show="current === 0">
						<ppc-food-card @click="foodClick" :dataSource="data"></ppc-food-card>
					</view>
					<!-- 收藏食物 -->
					<view v-show="current === 1">
						<ppc-food-card @click="foodClick" :dataSource="data"></ppc-food-card>
					</view>
					<!-- 自定义食物 -->
					<view v-show="current === 2">
						<ppc-food-card @click="foodClick" :dataSource="data"></ppc-food-card>
					</view>
					<!-- 套餐 -->
					<view v-show="current === 3">
						<view class="btn" @click="goToAdd" v-if="!isPackage">
							<image class="image" src="../../static/icon/add.png" mode="aspectFit"></image>
							<text class="text">添加套餐</text>
						</view>
						<ppc-food-card @click="foodClick" :dataSource="data"></ppc-food-card>
					</view>
					<!-- bottomText底部文字 -->
					<view class="medicine_title" v-if="!loading">
						{{isBottom?'没有更多数据了～':'下拉加载更多'}}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 底部栏 -->
		<view class="bottom">
			<ppc-bottom @click="saveFood" :number='number' :caloric='caloric'></ppc-bottom>
		</view>
		<!-- 弹出层 -->
		<ppc-popup v-if="show" :isShow="show" @notShow="notShow" :isPackage='isPackage' :foodData="foodData"
			:time="title" @foodData="getFoodData"></ppc-popup>
		<ppc-loading v-if="loading" :isSmall="true"></ppc-loading>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()
	import ppcSection from '/components/ppcSection.vue'
	import ppcBottom from '/components/ppcBottom.vue'
	import ppcFoodCard from '/components/ppcFoodCard.vue'
	import ppcPopup from '/components/ppcPopup.vue'
	import ppcLoading from '/components/ppcLoading.vue'
	//搜索内容
	const searchValue = ref()
	//判断是否触底
	const isBottom = ref(false)
	//当前页数
	const currentPage = ref(1)
	//每页显示的条数
	const pageSize = ref(10)
	// 记录的标题
	const title = ref()
	//是否为添加套餐
	const isPackage = ref(false)
	// 选择食物类型的索引
	const current = ref(0)
	// 食物类型
	const items = ref(['常用', '收藏', '自定义', '套餐'])
	// 食物信息
	const data = ref([])
	//总共的食物
	const totalFood = ref([])
	// 选择的食物数量
	const number = ref(0)
	// 选择的食物热量
	const caloric = ref(0)
	const loading = ref(false)
	// 是否显示popup弹窗
	const show = ref(false)
	// 饼状图所需的食物信息
	const foodData = ref()
	//是否为手动搜索
	const first = ref(false)
	onLoad((option) => {
		title.value = "记录" + option.title
		if (option.type == '套餐') {
			isPackage.value = true
		}
		getCloudFoodData()
	})
	//滑动到底部
	const lowerBottom = () => {
		if (!isBottom.value) {
			currentPage.value += 1
			getCloudFoodData(current.value + 1)
		}
	}
	//从服务器获取食物信息
	const getCloudFoodData = (status = 1) => {
		loading.value = true
		proxy.$http('getFood', {
			status: status,
			currentPage: currentPage.value,
			pageSize: pageSize.value
		}).then(res => {
			if (res.result.code === 200) {
				data.value = [...data.value, ...res.result.data.data]
			}
			if (res.result.data.affectedDocs < pageSize.value) {
				isBottom.value = true
			}
			loading.value = false
		})
	}
	// 搜索食物
	const search = () => {
		first.value = true
		getFoodByName()
	}
	//根据名称搜索
	const getFoodByName = () => {
		loading.value = true
		proxy.$http('getFoodByName', {
			food_name: searchValue.value,
			status: current.value + 1,
			currentPage: currentPage.value,
			pageSize: pageSize.value
		}).then(res => {
			if (res.result.code === 200) {
				if (first.value) {
					data.value = []
				}
				data.value = [...data.value, ...res.result.data.data]
			}
			if (res.result.data.affectedDocs < pageSize.value) {
				isBottom.value = true
			}
			loading.value = false
		})
	}
	// 接收子级传的是否显隐
	const notShow = () => {
		show.value = false
	}
	//保存上传记录
	const saveFood = (e) => {
		//新增套餐保存
		if (isPackage.value) {
			uni.redirectTo({
				url: `/pages/foodPackage/foodPackage?data=${JSON.stringify(totalFood.value)}`
			})
		} else {
			uni.showLoading({
				title: "上传中..."
			})
			//存储每日饮食记录
			let data = totalFood.value[0].date.replace("月", "/")
			let obj = {
				date: new Date().getFullYear() + '/' + data.slice(0, -1),
			}
			let time = title.value.slice(2, 4)
			if (time == '早餐') {
				obj.breakfast = totalFood.value
			} else if (time == '午餐') {
				obj.lunch = totalFood.value
			} else {
				obj.dinner = totalFood.value
			}
			proxy.$http('addFoodRecord', obj).then(res => {
				if (!res.errCode) {
					uni.showToast({
						title: "上传成功",
						duration: 1000
					});
					uni.hideLoading()
					uni.$emit('update', {
						type: 'food'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 500)
				}
			})
		}
	}

	// 切换食物类别事件
	const onClickItem = (e) => {
		if (current.value != e.currentIndex) {
			current.value = e.currentIndex;
		}
		data.value = []
		isBottom.value = false
		currentPage.value = 1
		getCloudFoodData(e.currentIndex + 1)
	}
	// 点击食物触发事件
	const foodClick = (e) => {
		let arr = [e]
		foodData.value = arr
		show.value = true
	}
	// 计算食物总数以及总热量
	const getFoodData = (e) => {
		let newData
		if (e.foodData) {
			newData = JSON.parse(JSON.stringify(e.foodData))
			newData.isPackage = true
			totalFood.value.push(newData)
		} else {
			totalFood.value.push(e)
		}
		number.value++;
		caloric.value += e.caloric
	}
	//新增套餐
	const goToAdd = () => {
		uni.navigateTo({
			url: '/pages/foodPackage/foodPackage'
		})
	}
</script>

<style lang="scss">
	.food {
		height: 100vh;

		.top {
			height: 15%;
		}

		.center {
			height: 75%;
			margin: 0 20rpx;

			.btn {
				height: 70rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 70rpx;

				.image {
					width: 40rpx;
					height: 40rpx;
					margin: 0 10rpx;
				}

				.text {
					font-size: 30rpx;
					font-weight: bold;
					color: #87C38F;
				}
			}
		}

		.bottom {
			height: 10%;
		}

		.medicine_title {
			display: flex;
			align-items: center;
			justify-content: center;
			// margin: 50rpx 0;
			color: #afafaf;
			font-size: 28rpx;
		}
	}
</style>